<template>
	<div class="prize-drop">
		<van-cell-group inset class="form">
			<van-cell title="连接状态" @click="refresh(injectedWeb3)" :class="injectedWeb3 ? 'success' : 'fail'"
				:label="injectedWeb3 ? '正常' : '连接失败, 点击此处重新连接'"></van-cell>
			<van-cell title="我的地址">
				<template #label>
					<van-field v-model="fromAddress" name="coinbase" readonly></van-field>
				</template>
			</van-cell>
			<div class="box">
				<van-cell title="总活跃数" :label="addressList.teamHash || 0"></van-cell>
				<van-cell title="总持有量" class="bottomBorder" :label="addressList.teamQuantity || 0"></van-cell>
			</div>
			<div class="box">
				<van-cell class="noneBorder" title="总持币地址数量" :label="addressList.teamValidAddress || 0"></van-cell>
				<van-cell class="topBorder" title="总提成数" :label="0"></van-cell>
			</div>
		</van-cell-group>
		<van-cell-group inset class="form">
			<van-cell title="当前地址" class="bgcolor">
				<template #label>
					<van-field v-model="current_address.address_format" name="currentAddress" readonly></van-field>
				</template>
			</van-cell>
			<div class="box">
				<van-cell title="活跃数(24h)" :label="current_address.hash || 0"></van-cell>
				<van-cell title="持有量(24h)" class="bottomBorder" :label="current_address.quantity || 0"></van-cell>
			</div>
			<div class="box">
				<van-cell class="noneBorde" title="持币地址数量(24h)" :label="current_address.validAddress || 0"></van-cell>
				<van-cell class="topBorder" title="提成数(24h)" :label="0"></van-cell>
			</div>
		</van-cell-group>
		<van-cell-group inset class="form">
			<van-button v-if="current_address.address && current_address.address != fromAddress" @click="goBack"
				icon="share-o" type="primary" size="small">返回上一层</van-button>
			<van-cell :title="'总共' + current_address.validAddress + '条'" v-if="current_address.list">
				<template #label>
					<van-field v-for="(item, index) in current_address.list" :key="index" class="hg"
						@click="changeCurrentAddress(item.address, item)" v-model="item.address_format" readonly>
					</van-field>
				</template>
			</van-cell>
			<van-cell v-else title="总共0条" label="暂无数据"></van-cell>
		</van-cell-group>
	</div>
</template>

<script>
	import {
		getAddressList
	} from '../../api/request.js'
	import web3 from 'web3'
	import {
		newBlockchainConnection
	} from '../../../util/getWeb.js'
	export default {
		name: 'casino-dapp',
		data() {
			return {
				fromAddress: '',
				current_address: {},
				addressList: '',
				WEB: '',
				injectedWeb3: false
			}
		},
		mounted() {
			this.WEB = newBlockchainConnection(web3.givenProvider)
			console.log(this.WEB)
			if (this.WEB) {
				this.injectedWeb3 = true
			} else {
				this.injectedWeb3 = false
			}
			this.setColor();
			this.fn()
		},
		methods: {
			// 返回
			goBack() {
				let parms = {
					currentAddress: this.current_address.parentAddress
				}
				this.query_address_hierarchy(parms)
			},
			// 刷新
			refresh(val) {
				if (!val) {
					location.reload()
				}
			},
			// 格式化
			plusXing(str, frontLen, endLen, cha, chaNum) {
				var len = chaNum || str.length - frontLen - endLen;
				var xing = '';
				for (var i = 0; i < len; i++) {
					xing += cha;
				}
				return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
			},
			// 格式化地址
			formatAddress(val) {
				if (val) {
					return this.plusXing(val, 10, 10, '*', 3)
				} else {
					return '-'
				}
			},
			// 点击地址查询
			changeCurrentAddress(val) {
				let parms = {
					currentAddress: val
				}
				this.query_address_hierarchy(parms)
			},
			// 查询地址层级
			query_address_hierarchy(val) {
				let params = {
					address: this.fromAddress, // '0x24757a4fbb5415c8bc42124ebaa36d74b94e1183'
					queryAddress: val.currentAddress
				}
				getAddressList(params).then(res => {
					if (res) {
						if (params.address == params.queryAddress) {
							this.addressList = this.current_address = res.data
						} else {
							// 点击子集更新的数据
							this.current_address = res.data
						}
						this.current_address.address_format = this.plusXing(res.data.address, 10, 10, '*', 20)
						if (this.current_address.list) {
							this.current_address.list.forEach((item) => {
								item.address_format = this.plusXing(item.address, 10, 10, '*', 20)
							})
						}
					}
				})
			},
			// 当用户选中账号变化时触发
			fn() {
				let that = this
				this.WEB.eth.requestAccounts().then((res, err) => {
					if (!err) {
						that.current_address.address_format = this.plusXing(res[0], 10, 10, '*', 20)
						that.fromAddress = res[0]
						that.query_address_hierarchy({
							currentAddress: res[0]
						})
					}
				})
			},
			setColor() {
				let divHeight = this.getPrizeDropHeight();
				let windowHeight = this.getWindowHeight();
				//当页面实际高度小于可视区域高度的时候，将可视区域高度 赋值给 实际高度
				if (divHeight < windowHeight) {
					if (document.getElementsByClassName('prize-drop')[0]) {
						document.getElementsByClassName('prize-drop')[0].style.height = windowHeight + 'px';
					}
				}
			},
			//获取当前页面实际高度
			getPrizeDropHeight() {
				return document.getElementsByClassName('prize-drop')[0].offsetHeight;
			},
			//获取可视区域高度
			getWindowHeight() {
				return document.documentElement.clientHeight || document.body.clientHeight;
			}
		}
	}
</script>

<style scoped>
	.van-cell {
		padding: 5px 16px;
	}

	.bottomBorder .van-cell__title::after {
		position: absolute;
		box-sizing: border-box;
		content: ' ';
		pointer-events: none;
		right: 16px;
		bottom: 0;
		left: 16px;
		border-bottom: 1px solid #ebedf0;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
	}

	.hg::after {
		right: 0;
		left: 0;
	}

	.hg /deep/ input {
		height: 40px;
	}

	.bgcolor {
		background: #ebebeb;
	}

	.bgcolor /deep/ input {
		background: #ebebeb;
		border-radius: 0;
	}
	
	.success /deep/ .van-cell__label {
		color: #07c160;
	}
	
	.fail /deep/ .van-cell__label {
		color: red;
	}

	.topBorder::after {
		bottom: auto;
		border-top: 1px solid #ebedf0;
	}

	.noneBorder::after {
		border: none;
	}

	.btns {
		margin: 16px;
		margin-bottom: 0;
	}

	.form:last-child {
		margin-bottom: 50px;
	}


	.form {
		margin-bottom: 10px;
	}

	.form /deep/ .van-cell.van-field {
		padding: 0;
	}

	.prize-drop {
		padding-top: 15px;
		background: #f7f8fa;
		box-sizing: border-box;
	}

	.box {
		display: flex;
		flex-direction: row;
	}
</style>
